<template>
  <el-row class="d-flex flex-column" v-if="$route.path === '/info/basic'">
    <el-col :span="24">
      <form
        class="el-form query-form el-form--label-right el-form--inline"
        v-if="!(admin.mType == 5)"
      >
        <div class="el-form-item el-form-item--medium" v-if="admin.mType == 2">
          <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
          <div class="el-form-item__content">
            <div class="el-input el-input--medium">
              <el-select v-model="query.rKey" placeholder="惠济区" @change="get_townAtt()">
                <el-option label="惠济区" value="1349"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType >= 4)">
          <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.zhenId"
              clearable
              placeholder="请选择想要查看的街道"
              @change="get_villageAtt()"
            >
              <el-option
                v-for="(town, index) in townAtt"
                :key="index"
                :label="town.zName"
                :value="town.zhenId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType == 5)">
          <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.villageId"
              clearable
              placeholder="请选择想要查看的村"
              @change="get_groupAtt()"
            >
              <el-option
                v-for="(village, index) in villageAtt"
                :key="index"
                :label="village.vName"
                :value="village.villageId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium ml-8 mr-10" v-if="!(admin.mType == 5)">
          <div class="el-form-item__content">
            <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium pl-10" v-if="!(admin.mType == 3)">
          <div class="el-form-item__content">
            <el-button plain icon="el-icon-plus" @click="show_form()">
              <span>添加</span>
            </el-button>
          </div>
          <!---->
        </div>
      </form>
    </el-col>
    <el-col :span="24">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(225, 225, 225, 0.8)"
        ref="multipleTable"
        :data="items"
        border
        tooltip-effect="dark"
        style="width: 100%"
        max-height="600"
        @selection-change="handleSelectionChange"
        :row-style="tableRowStyle"
      >
        <el-table-column type="selection" width="120" align="center"></el-table-column>
        <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
        <el-table-column label="行政村名" width="240" align="center" prop="vName"></el-table-column>
        <el-table-column label="村主任" width="240" align="center" prop="vBeiyong1"></el-table-column>
        <el-table-column label="所属地区" width="200" align="center" prop="vAdress"></el-table-column>
        <el-table-column label="人口数量" width="200" align="center" prop="vPopulation"></el-table-column>
        <el-table-column label="占地面积" width="200" align="center" prop="vArea"></el-table-column>
        <el-table-column prop="name" label="编辑" align="center" fixed="right" width="350">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-tickets" @click="showAll(scope.$index)">详情</el-button>
            <el-button
              v-if="!(admin.mType == 3)"
              type="warning"
              icon="el-icon-edit"
              @click="updata(scope.$index)"
            >编辑</el-button>
            <el-button
              v-if="!(admin.mType == 3)"
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.$index, 'vName')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-row class="d-flex jc-end">
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current_page"
                :page-sizes="pagination.page_sizes"
                :page-size="pagination.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-dialog
      title="行政村基本信息添加"
      v-if="$route.path === '/info/basic'"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_create"
    >
      <el-form
        ref="ruleForm_create"
        :model="form"
        :rules="rules"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0 demo-ruleForm"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <el-form-item label="所属镇" prop="vZhenXiang">
              <div class="el-form-item__content">
                <el-select v-model="form.vZhenXiang" clearable placeholder="请选择想要查看的镇">
                  <el-option
                    v-for="(town, index) in townAtt"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="村主任" prop="vBeiyong1">
              <div class="el-form-item__content">
                <el-input v-model="form.vBeiyong1" clearable></el-input>
              </div>
            </el-form-item>
            <el-form-item label="人口数" prop="vPopulation">
              <div class="el-form-item__content">
                <el-input v-model.number="form.vPopulation" clearable></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <el-form-item label="村名称" prop="vName">
              <div class="el-form-item__content">
                <el-input v-model="form.vName" clearable></el-input>
              </div>
            </el-form-item>
            <el-form-item label="所属地区" prop="vAdress">
              <div class="el-form-item__content">
                <el-input v-model="form.vAdress" clearable></el-input>
              </div>
            </el-form-item>
            <el-form-item label="占地面积" prop="vArea">
              <div class="el-form-item__content">
                <el-input v-model.number="form.vArea" clearable placeholder="单位: 平方米"></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24" class="mb-2">
          <el-form-item label="简介" prop="vBeiyong3">
            <div class="el-form-item__content flex-1 pr-2">
              <el-input type="textarea" v-model="form.vBeiyong3"></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="村貌图" prop="src">
            <div class="el-form-item__content flex-1 pr-2">
              <el-upload
                ref="upload"
                :action="$http.defaults.baseURL + 'VInsert'"
                list-type="picture-card"
                :on-success="success_c"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="set_form"
                :on-change="file_change"
                :auto-upload="false"
                :data="form"
                :multiple="true"
                :http-request="uploadFile"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" size="tiny">
                <img width="100%" v-if="form.src" :src="form.src" alt />
              </el-dialog>
            </div>
          </el-form-item>
        </el-col>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_c">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm_create')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="行政村基本信息编辑"
      v-if="$route.path === '/info/basic'"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_edmit"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">所属镇</label>
              <div class="el-form-item__content">
                <el-select v-model="form.vZhenXiang" clearable placeholder="请选择想要查看的镇">
                  <el-option
                    v-for="(town, index) in townAtt"
                    :key="index"
                    :disabled="admin.mType >= 3"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村主任</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vBeiyong1" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">人口数</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vPopulation" clearable></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村名称</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vName" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">所属地区</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vAdress" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">占地面积</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vArea" clearable placeholder="单位: 平方米"></el-input>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" class="mb-2">
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">简介</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-input type="textarea" v-model="form.vBeiyong3"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">村貌图</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-upload
                ref="upload"
                :action="$http.defaults.baseURL + 'VUpdate'"
                list-type="picture-card"
                :on-success="success_c"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="set_form"
                :on-change="file_change"
                :auto-upload="false"
                :file-list="form.src"
                :data="form"
                :multiple="true"
                :http-request="uploadFile"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-col>
      </el-form>

      <el-dialog :visible.sync="dialogVisible_all" size="tiny" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_u">取 消</el-button>
        <el-button type="primary" @click="updata_save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="行政村基本信息详情"
      v-if="$route.path === '/info/basic'"
      width="40%"
      :show-close="true"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_all"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">所属镇</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.vZhenXiang"
                  :disabled="true"
                  clearable
                  placeholder="请选择想要查看的镇"
                >
                  <el-option
                    v-for="(town, index) in townAtt"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村主任</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vBeiyong1" :disabled="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">人口数</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vPopulation" :disabled="true" clearable></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村名称</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vName" :disabled="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">所属地区</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vAdress" :disabled="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">占地面积</label>
              <div class="el-form-item__content">
                <el-input v-model="form.vArea" :disabled="true" clearable placeholder="单位: 平方米"></el-input>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" class="mb-2">
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">简介</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-input type="textarea" :disabled="true" v-model="form.vBeiyong3"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">村貌图</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-upload
                ref="upload"
                list-type="picture-card"
                :on-success="success_c"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="set_form"
                :on-change="file_change"
                :auto-upload="false"
                :file-list="form.src"
                :data="form"
                :multiple="true"
                :http-request="uploadFile"
                :disabled="true"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-col>
      </el-form>

      <el-dialog :visible.sync="dialogVisible_all" size="tiny" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_all = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>
                                                  
<script>
export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        vZhenXiang: "",
        vBeiyong1: "",
        vPopulation: "",
        vName: "",
        vAdress: "",
        vArea: "",
        vBeiyong3: "",
        src: ""
      },
      rules: {
        vZhenXiang: [
          { required: true, message: "请选择镇名称", trigger: "change" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        vBeiyong1: [
          { required: true, message: "请输入村主任名称", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        vPopulation: [
          { required: true, message: "请输入人口数", trigger: "blur" },
          {
            type: "number",
            message: "人口数必须为数字",
            trigger: "blur"
          }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        vName: [
          { required: true, message: "请选择村名称", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        vAdress: [
          { required: true, message: "请输入所属地区", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        vArea: [
          { required: true, message: "请输入占地面积", trigger: "blur" },
          {
            type: "number",
            message: "占地面积必须为数字",
            trigger: "blur"
          }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        vBeiyong3: [
          { required: true, message: "请输入简介", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        // src: [
        //   // { required: true, message: "请输入活动名称", trigger: "blur" }
        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      //form规则,表单提交
      admin: {},
      obj: {},
      loading: true,
      pagination: {
        current_page: 0,
        page_sizes: [20, 30, 50, 100],
        page_size: 20,
        total: 0,
        page_length: 0,
        method: true
      },
      //对应镇
      townAtt: [],
      //对应村
      villageAtt: [],
      //对应组
      groupAtt: [],
      //模态框
      dialogFormVisible_create: false,
      dialogFormVisible_edmit: false,
      dialogFormVisible_all: false,

      formLabelWidth: "100px",
      form: {
        //弹出框内容
      },
      query: {
        rKey: "1349",
        zhenId: "",
        villageId: ""
      },
      items: [
        //表格内容
      ],
      init_items: [
        //原始表格渲染数据
      ],
      init_items_mes: {
        count: 50
      },
      //序列id
      index_id: 0,
      index: 0,

      //多删数组
      delAtt: [],
      multipleSelection: [],
      //文件上传
      fileList: [],
      file: {},
      formDate: "hah",
      dialogImageUrl: "",
      dialogVisible_all: false,
      //搜索功能
      query_items: []
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          switch (formName) {
            case "ruleForm_create":
              this.create();
              break;
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    setQuery() {
      if (this.admin.mType == 4) {
        this.query.rKey = this.admin.mRegion;
        this.query.zhenId = this.admin.mZhenid;
        this.get_villageAtt(this.admin.mZhenid);
      }
      if (this.admin.mType == 5) {
        this.query.rKey = this.admin.mRegion;
        this.query.zhenId = this.admin.mZhenid;
        this.query.villageId = this.admin.mVillageid;
      }
    },
    setObj(obj) {
      if (obj) {
        obj.mType = this.admin.mType;
        obj.rKey = "1349";
        obj.zhenId = this.query.zhenId || "0";
        obj.villageId = this.query.villageId || "0";
        obj.startPage = this.pagination.current_page;
        obj.pageSize = this.pagination.page_size;
      }
    },
    async get_townAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findzhenByRegionId/1349`);
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByRegionId/${this.query.rKey}`
        );
      }
      this.townAtt = res.data.data;
    },
    async get_villageAtt(data) {
      this.query.villageId = "";
      const res = await this.$http.get(
        `/caiwu/findzhenByZhenId/${data || this.query.zhenId}`
      );
      this.villageAtt = res.data.data;
    },
    async get_groupAtt() {
      const res = await this.$http.get(`/caiwu/findZu/${this.query.villageId}`);
      this.groupAtt = res.data.data;
    },
    //请求数据
    async fetch(obj) {
      this.setObj(obj);
      const res = await this.$http.post(
        "/VillageInfoSearch",
        this.Qs.stringify(obj)
      );
      if (Array.isArray(res.data.data)) {
        Array.isArray(res.data.data) &&
          res.data.data.forEach(item => {
            let att = [];
            if (item.vImagepath1) {
              item.src = item.vImagepath1.split(",");
              item.src.forEach(item => {
                if (item) {
                  att.push({
                    url: `${this.assetsURL}Village/${item}`,
                    name: `${item}`
                  });
                }
              });
            }
            item.src = att;
            console.log(item.src);
          });
      }
      this.init_items = res.data;
      this.items = res.data.data;
      this.up_pagination();
      if (res.status == 200) {
        this.loading = false;
      }
    },
    //query
    to_query() {
      let { rkey, zhenId, villageId } = this.query;
      let obj = { rkey, zhenId, villageId };
      this.fetch(obj);
    },
    handleSelectionChange(val) {
      let att = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        let { villageId } = item;
        att.push(villageId);
      });
      this.delAtt = att;
    },
    setIndex() {
      this.$basicMes.forEach((item, index) => {
        if (item.name == this.query.town) {
          this.villageAtt = this.$basicMes[index].village;
        }
      });
    },

    del(index, name) {
      console.log("haha");
      this.index_id = index;
      this.form = this.items[index];
      console.log(this.form);
      this.$confirm(
        `此操作将永久删除 ${this.items[index][name]}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(async index => {
          const res = await this.$http.delete(
            `/VillageDeleteone/${this.form.villageId}/${this.admin.managerId}`
          );
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.to_query();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    initImage(imgAtt) {
      imgAtt.forEach(item => {
        if (item) {
          let file = {};
          this.appandFile(file, file => (item.file = file), item.url);
        }
      });
      this.fileList = imgAtt;
    },
    updata(index, flag) {
      this.form = JSON.parse(JSON.stringify(this.items[index]));
      this.initImage(this.form.src);
      this.index_id = index;
      this.get_townAtt(true);
      if (flag) {
        this.dialogFormVisible_all = true;
      } else {
        this.dialogFormVisible_edmit = true;
      }
    },

    async del_multip(name) {
      if (!this.delAtt.length) {
        return;
      }
      let str = "";
      this.multipleSelection.forEach(item => {
        str += item[name] + "\t\t";
      });

      this.$confirm(`此操作将永久删除 ${str}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          console.log(".....////");
          console.log({
            delAtt: this.delAtt
          });
          const res = await this.$http.delete(
            `/VillageDeleteMany/${this.delAtt.toString()}/${
              this.admin.managerId
            }`
          );
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.to_query();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //选择文件
    select_file() {
      let path = this.$route.name;
      console.log(path);
      if (path == "account") {
        this.$notify({
          title: "警告",
          message: "这是一条警告的提示消息",
          type: "warning"
        });
      }
    },
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    
    handlePreview(file) {
      console.log(file);
    },
    //分页功能
    up_pagination() {
      this.pagination.page_length = Math.ceil(
        this.init_items.count / this.pagination.current_page
      );
      this.pagination.total = this.init_items.count;
    },
    handleSizeChange(val) {
      this.pagination.page_size = val;
      this.pagination.current_page = 1;
    },
    async handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.$util.setCookie("current_page", this.pagination.current_page);
      this.loading = true;
      this.to_query();
    },

    //create
    reset_c() {
      this.$confirm("确定重置新增数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$message({
          type: "success",
          message: "已重置"
        });
        for (let item in this.form) {
          this.form[item] = "";
        }
      });
    },
    show_form() {
      this.get_townAtt(true);
      this.form = this.ruleForm;
      this.dialogFormVisible_create = true;
    },
    set_form() {
      this.form.managerId = this.admin.managerId;
      this.form.vRegion = 1349;
      for (let item in this.form) {
        if (!this.form[item]) {
          delete this.form[item];
        }
      }
      delete this.form.villagesurvey;
    },
    cancel_c() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          this.form = {};
          this.dialogFormVisible_create = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    success_c(res, file, files) {
      this.$message({
        type: "success",
        message: `新增成功！`
      });
      this.to_query();
      this.dialogFormVisible_create = false;
    },
    handleRemove(file, fileList) {
      console.log(fileList, `-------------Remove`);
      this.fileList = fileList;
    },
    file_change(file, fileList) {
      this.fileList = fileList;
      console.log(fileList, `-------------change`);
    },
    uploadFile(files) {
      this.formDate.append("file", files.file);
    },
    async create() {
      if (this.fileList.length > 0) {
        this.formDate = new FormData();
        this.$refs.upload.submit();
        for (let item in this.form) {
          this.formDate.append(item, this.form[item]);
        }
        const res = await this.$http.post("VInsert2", this.formDate);
        if (res.status == 200) {
          this.dialogFormVisible = false;
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.to_query();
          this.dialogFormVisible_create = false;
        } else {
          this.$message({
            message: "新增失败",
            type: "error"
          });
        }
      } else {
        this.set_form();
        const res = await this.$http.post(
          "VInsert2",
          this.Qs.stringify(this.form)
        );
        if (res.status == 200) {
          this.dialogFormVisible = false;
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.to_query();
          this.dialogFormVisible_create = false;
        } else {
          this.$message({
            message: "新增失败",
            type: "error"
          });
        }
      }
    },

    //edmit
    reset_u() {
      this.$confirm("确定重置编辑数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        for (let item in this.form) {
          this.form[item] = "";
        }
        this.get_townAtt(true);
        this.$message({
          type: "success",
          message: "已重置"
        });
      });
    },
    cancel_u() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          this.to_query();
          setTimeout(() => {
            this.dialogFormVisible_edmit = false;
          }, 200);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    success_u(res, file, files) {
      console.log(res);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible_all = true;
    },
    async updata_save() {
      if (this.form["src"]) {
        delete this.form["src"];
      }
      if (this.fileList.length > 0) {
        this.set_form();
        this.formDate = new FormData();
        this.fileList.forEach(file => {
          if (file.file) {
            this.formDate.append("file", file.file);
          } else {
            this.formDate.append("file", file.raw);
          }
        });
        for (let item in this.form) {
          this.formDate.append(item, this.form[item]);
        }
        // this.getBlob(
        //   {
        //     url:
        //       "https://reset-hj-dev.oss-cn-beijing.aliyuncs.com/images/20200602/08364777.jpg",
        //     name: "1591341464049.jpg"
        //   },
        //   this.formDate
        // )
        const res = await this.$http.post("VUpdate", this.formDate);
        if (res.data.statue == "success") {
          this.dialogFormVisible = false;
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          this.to_query();
          this.dialogFormVisible_edmit = false;
        } else {
          this.$message({
            message: "编辑失败",
            type: "error"
          });
        }
      } else {
        this.set_form();
        const res = await this.$http.post(
          "VUpdate",
          this.Qs.stringify(this.form)
        );
        if (res.status == 200) {
          this.dialogFormVisible = false;
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          this.to_query();
          this.dialogFormVisible_edmit = false;
        } else {
          this.$message({
            message: "编辑失败",
            type: "error"
          });
        }
      }
    },
    cancel() {
      for (let item in this.form) {
        this.form[item] = "";
      }
      this.dialogFormVisible_all = false;
    },
    showAll(index) {
      this.updata(index, true);
    },
    //表格行样式
    tableRowStyle({ row, rowIndex }) {}
  },

  created() {
    // console.log(

    // );
    this.admin = this.$util.handleLocalStorage("get", "admin");
    this.pagination.current_page = 1;
    this.$util.setCookie("current_page", this.pagination.current_page);
    this.get_townAtt();
    this.setQuery();
    this.fetch(this.obj);
  }
};
</script>

<style lang="scss" scoped>
</style>

